import { Alert, Button } from 'antd';
import { random } from 'lodash';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

const ButtonControl = () => {
  const { t } = useTranslation();
  const [clickCount, setClickCount] = useState(0);

  const clickMap = () => {
    if (clickCount <= 5) {
      return clickCount % 2 === 0 ? t('confirm') : t('cancel');
    } else {
      return random(1, 1000, true);
    }
  };

  return (
    <>
      <Alert showIcon className="mb-4" type="warning" message={t('buttonControlAdvice')} />
      <Button onClick={() => setClickCount(clickCount + 1)}>{clickMap()}</Button>
    </>
  );
};

export default ButtonControl;
